<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl" xmlns:bb="http://www.backbase.com/2006/client"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="treeBase treeBranchBase treeLeafBase" src="../treeBase.xml"/>

		<d:element name="tree" extends="b:treeBase">
			
			<d:resource type="text/css"><![CDATA[.btl-tree {
	position: relative;
	overflow: auto;
	height: 100%;
	width: 100%;
	background-color: Window;
}
.btl-tree-focusElement {
	position: absolute;
	left: 0;
	top: 0;
}
.btl-treeBranch .btl-treeBranch-content {
	padding-left: 17px;
	/*zoom: normal; /* fix for bug 5948 that can not be used due to causing bug 8493 */
}
.btl-tree-rtl .btl-treeBranch-content {
	padding-left: 0;
	padding-right: 17px;
}
.btl-treeBranch-stateIndicator *,
.btl-treeBranch-stateIndicator,
.btl-treeLeaf *,
.btl-treeLeaf {
	cursor: pointer;
}
.btl-treeBranch-closed .btl-treeBranch,
.btl-treeBranch-closed .btl-treeLeaf,
.btl-treeBranch-closed .btl-treeBranch-content,
.btl-treeBranch-empty .btl-treeBranch-content {
	display: none;
	visibility: hidden;
}
.btl-treeBranch-label-container,
.btl-treeLeaf-label-container {
	font-size: 100%;
	line-height: 130%;
	background-color: Window;
}
.btl-tree-rtl .btl-treeLeaf-label-container,
.btl-tree-rtl .btl-treeBranch-label-container {
	direction: rtl;
	unicode-bidi: bidi-override;
}
.btl-treeBranch-div,
.btl-treeBranch-stateIndicator {
	background-repeat: no-repeat;
	background-position: 0 center;
}
.btl-treeBranch-stateIndicator {
	padding-left: 14px;
	position: relative;
}
.btl-treeBranch-div {
	padding-left: 18px;
}
.btl-tree-rtl .btl-treeBranch-div,
.btl-tree-rtl .btl-treeBranch-stateIndicator {
	background-position: 100% center;
	padding-left: 0;
}
.btl-tree-rtl .btl-treeBranch-stateIndicator {
	padding-right: 14px;
}
.btl-tree-rtl .btl-treeBranch-div {
	padding-right: 18px;
}
.btl-treeLeaf .btl-tree-line-horizontal {
	padding-left: 14px;
}
.btl-tree-rtl .btl-treeLeaf .btl-tree-line-horizontal {
	padding-left: 0;
	padding-right: 14px;
}
.btl-treeBranch .btl-treeBranch-label,
.btl-treeLeaf .btl-treeLeaf-label {
	padding: 1px 3px;
	/* white-space: nowrap; would have been nice here, but it causes IE to render the containing box incorrectly */
	color: WindowText;
	display: inline;
}
.btl-treeBranch .selected,
.btl-treeLeaf .selected {
	background-color: Highlight;
	color: HighlightText;
}
.btl-tree-focus .btl-treeItem-focus .btl-treeBranch-focusIndicator,
.btl-tree-focus .btl-treeItem-focus .btl-treeLeaf-focusIndicator {
	border: 1px dotted black;
	padding: 0 2px;
}
.btl-disabled .btl-treeBranch-label,
.btl-disabled .btl-treeLeaf-label {
	color: GrayText;
}
.btl-disabled .btl-treeBranch-label.selected,
.btl-disabled .btl-treeLeaf-label.selected {
	color: InactiveCaptionText;
	background-color: InactiveCaption;
}
.btl-treeBranch-open .btl-treeBranch-stateIndicator {
	background-image: url(media/treeBranchMinus.png);
}
.btl-treeBranch-open .btl-treeBranch-div {
	background-image: url(media/folderOpen.png);
}
.btl-tree-rtl .btl-treeBranch-open .btl-treeBranch-div {
	background-image: url(media/rtlFolderOpen.png);
}
.btl-treeBranch-closed .btl-treeBranch-stateIndicator {
	background-image: url(media/treeBranchPlus.png);
}
.btl-treeBranch-closed .btl-treeBranch-div {
	background-image: url(media/folderClosed.png);
}
.btl-tree-rtl .btl-treeBranch-closed .btl-treeBranch-div {
	background-image: url(media/rtlFolderClosed.png);
}
.btl-treeBranch-empty .btl-treeBranch-stateIndicator {
	background-image: none;
}
.btl-treeBranch-empty .btl-treeBranch-div {
	background-image: url(media/folderClosed.png);
}
.btl-tree-rtl .btl-treeBranch-empty .btl-treeBranch-div {
	background-image: url(media/rtlFolderClosed.png);
}
.btl-treeLeaf-label-container {
	background-repeat: no-repeat;
	background-image: url(media/treeLeaf.png);
	background-position: 0 center;
	padding-left: 18px;
}
.btl-tree-rtl .btl-treeLeaf-label-container {
	padding-left: 0;
	padding-right: 17px;
	background-position: 100% center;
}
/* TREE LINES */
.btl-tree-line-vertical {
	background-image: url(media/treeLineVertical.png);
	background-repeat: repeat-y;
	background-position: 0 0;
}
.btl-tree-rtl .btl-tree-line-vertical {
	background-position: 100% 0;
}
.btl-tree-line-vertical-first {
	background-image: url(media/treeLineVerticalFirst.png);
	background-repeat: no-repeat;
	background-position: 0 center;
}
.btl-tree-rtl .btl-tree-line-vertical-first {
	background-position: 100% center;
}
.btl-tree-line-vertical2 {
	background-image: url(media/treeLineVertical2First.png);
	background-repeat: no-repeat;
	background-position: 0 center;
}
.btl-tree-rtl .btl-tree-line-vertical2 {
	background-position: 100% center;
}
.btl-treeBranch-closed .btl-tree-line-vertical2 {
	background-image: none;
}
.btl-tree-line-vertical-last {
	background-image: url(media/treeLineVerticalLast.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-color: Window;
}
.btl-tree-rtl .btl-tree-line-vertical-last {
	background-position: 100% center;
}
.btl-tree-line-horizontal {
	background-image: url(media/treeLineHorizontal.png);
	background-repeat: no-repeat;
	background-position: 0 center;
}
.btl-tree-rtl .btl-tree-line-horizontal {
	background-position: 100% center;
}
.btl-tree-nolines .btl-tree-line-vertical-first,
.btl-tree-nolines .btl-tree-line-vertical2,
.btl-tree-nolines .btl-tree-line-vertical,
.btl-tree-nolines .btl-tree-line-vertical-last,
.btl-tree-nolines .btl-tree-line-horizontal {
	background-image: none;
}
/* fixes */
.btl-tree,
.btl-tree * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}
.ie .btl-tree,
.ie .btl-tree * {
	zoom: 1.0;/* Fix to prevent bug 8493. Also solves a problem with onclick */
}
.gecko .btl-tree {
	-moz-outline: none;
	padding-bottom: 1px; /* fix for bug 9028 */
}]]></d:resource>
			<d:resource type="image/png" src="media/treeLineHorizontal.png"/>
			<d:resource type="image/png" src="media/treeLineVertical.png"/>
			<d:resource type="image/png" src="media/treeLineVerticalFirst.png"/>
			<d:resource type="image/png" src="media/treeLineVerticalLast.png"/>

			<d:resource type="text/javascript"><![CDATA[
				btl.tree = {};

				btl.tree.repaint = function btl_tree_repaint(oController){
					var aElements = oController.getProperty('elements');

					// REMOVE ALL CLASSES THAT MAY HAVE BEEN SET
					if(aElements.length) {
						for(var i = 0, iMax = aElements.length ; iMax > i ; i++){
							if(bb.instanceOf(aElements[i], btl.namespaceURI, 'treeBranch')){
								bb.html.removeClass(aElements[i].viewNode.firstChild, ['btl-tree-line-vertical-last', 'btl-tree-line-vertical-first']);
								bb.html.addClass(aElements[i].viewNode.lastChild, 'btl-tree-line-vertical');
							// if it's not a treeBranch it's a treeLeaf
							} else {
								bb.html.removeClass(aElements[i].viewNode, ['btl-tree-line-vertical-last', 'btl-tree-line-vertical-first']);
								bb.html.addClass(aElements[i].viewNode, 'btl-tree-line-vertical');
							}
						}

						var oFirstChild = aElements[0];
						var oLastChild = aElements[aElements.length - 1];

						//if there is only one child
						if ( oFirstChild == oLastChild ) {
							if(bb.instanceOf(oFirstChild, btl.namespaceURI, 'treeBranch')){
								bb.html.removeClass(oFirstChild.viewNode.firstChild, 'btl-tree-line-vertical');
								bb.html.removeClass(oFirstChild.viewNode.lastChild, 'btl-tree-line-vertical');
							// if it's not a treeBranch it's a treeLeaf
							} else {
								bb.html.removeClass(oFirstChild.viewNode, 'btl-tree-line-vertical');
							}
						} else {
							if(bb.instanceOf(oFirstChild, btl.namespaceURI, 'treeBranch'))
								bb.html.addClass(oFirstChild.viewNode.firstChild, 'btl-tree-line-vertical-first');
							else
								bb.html.addClass(oFirstChild.viewNode, 'btl-tree-line-vertical-first');

							// SET CLASSES FOR THE LAST CHILD
							if(bb.instanceOf(oLastChild, btl.namespaceURI, 'treeBranch')){
								bb.html.addClass(oLastChild.viewNode.firstChild, 'btl-tree-line-vertical-last');
								bb.html.removeClass(oLastChild.viewNode.lastChild, 'btl-tree-line-vertical');
							} else {
								bb.html.addClass(oLastChild.viewNode, 'btl-tree-line-vertical-last');
							}
						}
					}
				}
			]]></d:resource>

			<d:template type="application/xhtml+xml">
				<div class="btl-tree" tabindex="-1">
					<input class="btl-invisibleFocusInput btl-tree-focusElement" onbeforedeactivate="if(this.parentNode.controller.__focused){return false;}" readonly="readonly"/>
					<d:content/>
				</div>
			</d:template>

			<d:attribute name="lines" default="lines">
				
				<d:mapper type="text/javascript"><![CDATA[
					if( btl.isTrueValue(name, value) )
						bb.html.removeClass(this.viewNode, 'btl-tree-nolines');
					else
						bb.html.addClass(this.viewNode, 'btl-tree-nolines');
				]]></d:mapper>
			</d:attribute>

			<d:method name="appendChild">
				<d:argument name="node"/>
				<d:body type="text/javascript"><![CDATA[
					var oParent = node.getProperty('parentNode');
					this.callSuper('appendChild', [node]);
					if(oParent && oParent != this){
						if( bb.instanceOf(oParent, btl.namespaceURI, 'treeBranch') )
							btl.treeBranch.repaint(oParent);
						else if( bb.instanceOf(oParent, btl.namespaceURI, 'tree') )
							btl.tree.repaint(oParent);
					}
					btl.tree.repaint(this);
				]]></d:body>
			</d:method>

			<d:method name="insertBefore">
				<d:argument name="node"/>
				<d:argument name="child"/>
				<d:body type="text/javascript"><![CDATA[
					var oParent = node.getProperty('parentNode');
					this.callSuper('insertBefore', [node, child]);
					if(oParent && oParent != this){
						if( bb.instanceOf(oParent, btl.namespaceURI, 'treeBranch') )
							btl.treeBranch.repaint(oParent);
						else if( bb.instanceOf(oParent, btl.namespaceURI, 'tree') )
							btl.tree.repaint(oParent);
					}
					btl.tree.repaint(this);
				]]></d:body>
			</d:method>

			<d:method name="removeChild">
				<d:argument name="node"/>
				<d:body type="text/javascript"><![CDATA[
					this.callSuper('removeChild', [node]);
					btl.tree.repaint(this);
				]]></d:body>
			</d:method>

			<d:method name="replaceChild">
				<d:argument name="node"/>
				<d:argument name="child"/>
				<d:body type="text/javascript"><![CDATA[
					var oParent = node.getProperty('parentNode');
					this.callSuper('replaceChild', [node, child]);
					if(oParent && oParent != this){
						if( bb.instanceOf(oParent, btl.namespaceURI, 'treeBranch') )
							btl.treeBranch.repaint(oParent);
						else if( bb.instanceOf(oParent, btl.namespaceURI, 'tree') )
							btl.tree.repaint(oParent);
					}
					btl.tree.repaint(this);
				]]></d:body>
			</d:method>

			<d:handler event="DOMNodeInsertedIntoDocument" type="text/javascript"><![CDATA[
				var aElements = this.getProperty('elements');
				if(aElements.length){
					var oFirstChild = aElements[0];
					var oLastChild = aElements[aElements.length - 1];

					/* SET CORRECT CLASS IF FIRST ELEMENT IS LAST ELEMENT */
					if ( oFirstChild == oLastChild ) {
						bb.html.removeClass(oFirstChild.viewNode.firstChild, 'btl-tree-line-vertical');
						bb.html.removeClass(oFirstChild.viewNode.lastChild, 'btl-tree-line-vertical');
					} else {
						/* SET CORRECT CLASS FOR FIRST ELEMENT */
						if(bb.instanceOf(oFirstChild, btl.namespaceURI, 'treeBranch'))
							bb.html.addClass(oFirstChild.viewNode.firstChild, 'btl-tree-line-vertical-first');
						else
							bb.html.addClass(oLastChild.viewNode, 'btl-tree-line-vertical-first');

						/* SET CORRECT CLASS FOR LAST ELEMENT */
						if(bb.instanceOf(oLastChild, btl.namespaceURI, 'treeBranch')){
							bb.html.addClass(oLastChild.viewNode.firstChild, 'btl-tree-line-vertical-last');
							bb.html.removeClass(oLastChild.viewNode.lastChild, 'btl-tree-line-vertical');
						} else {
							bb.html.addClass(oLastChild.viewNode, 'btl-tree-line-vertical-last');
						}
					}
				}
			]]></d:handler>

			<d:handler event="focus" type="text/javascript"><![CDATA[
				bb.html.addClass(this.viewNode, 'btl-tree-focus');
			]]></d:handler>

			<d:handler event="blur" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, 'btl-tree-focus');
			]]></d:handler>

		</d:element>

		<d:element name="treeBranch" extends="b:treeBranchBase">
			

			<d:resource type="image/png" src="media/treeBranchPlus.png"/>
			<d:resource type="image/png" src="media/treeBranchMinus.png"/>
			<d:resource type="image/png" src="media/folderClosed.png"/>
			<d:resource type="image/png" src="media/folderOpen.png"/>
			<d:resource type="image/png" src="media/rtlFolderClosed.png"/>
			<d:resource type="image/png" src="media/rtlFolderOpen.png"/>
			<d:resource type="text/javascript"><![CDATA[
				if (!btl.treeBranch) {
					btl.treeBranch = {};
				}
				btl.treeBranch.getIconElement = function(oNode) {
					if (oNode.__iconNode) {return oNode.__iconNode;}
					var oEl = oNode.viewNode;
					while(oEl && !bb.html.hasClass(oEl, "btl-treeBranch-div")) {
						oEl = bb.html.getFirstByNodeType(oEl, 1);
					}
					return (oNode.__iconNode = oEl);
				};

				btl.treeBranch.repaint = function(oController) {
					var aElements = oController.getProperty('elements');

					// REMOVE ALL CLASSES THAT MAY HAVE BEEN SET
					if(aElements.length) {
						for(var i = 0, iMax = aElements.length ; iMax > i ; i++){
							if(bb.instanceOf(aElements[i], btl.namespaceURI, 'treeBranch')){
								bb.html.removeClass(aElements[i].viewNode.firstChild, ['btl-tree-line-vertical-first', 'btl-tree-line-vertical-last']);
								bb.html.addClass(aElements[i].viewNode.lastChild, 'btl-tree-line-vertical');
							// if it's not a treeBranch it's a treeLeaf
							} else {
								bb.html.removeClass(aElements[i].viewNode, ['btl-tree-line-vertical-first', 'btl-tree-line-vertical-last']);
								bb.html.addClass(aElements[i].viewNode, 'btl-tree-line-vertical');
							}
						}

						// SET CLASSES FOR THE LAST CHILD
						var oLastChild = aElements[aElements.length - 1];
						if(bb.instanceOf(oLastChild, btl.namespaceURI, 'treeBranch')){
							bb.html.addClass(oLastChild.viewNode.firstChild, 'btl-tree-line-vertical-last');
							bb.html.removeClass(oLastChild.viewNode.lastChild, 'btl-tree-line-vertical');
						} else {
							bb.html.addClass(oLastChild.viewNode, 'btl-tree-line-vertical-last');
						}

						// SHOW THE EXTRA LINE IF THERE ARE CHILDREN AND THE NODE IS OPEN
						bb.html.addClass(oController.viewNode.firstChild.firstChild, 'btl-tree-line-vertical2');
						//bb.html.removeClass(oController.viewNode, 'btl-treeBranch-empty');
					} else {
						// REMOVE EXTRA LINE AND PLUS IF THERE ARE NO CHILDREN ANY MORE
						// bb.html.removeClass(oController.viewNode.firstChild.firstChild, 'btl-tree-line-vertical2');
						// bb.html.addClass(oController.viewNode, 'btl-treeBranch-empty');
					}
				}
			]]></d:resource>

			<d:template type="application/xhtml+xml">
				<div class="btl-treeBranch btl-treeBranch-closed">
					<div class="btl-tree-line-vertical">
						<div>
							<div class="btl-tree-line-horizontal">
								<div class="btl-treeBranch-stateIndicator btl-dataTree-toggleOpenClose">
									<div class="btl-treeBranch-div">
										<div class="btl-treeBranch-label-container btl-dataTree-selectAndToggle">
											<span class="btl-label btl-treeBranch-label btl-treeBranch-focusIndicator"/>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="btl-treeBranch-content btl-tree-line-vertical"><d:content/></div>
				</div>
			</d:template>

			<!-- ATTRIBUTES -->
			<d:attribute name="open">
				
				<d:mapper type="text/javascript"><![CDATA[
					if( btl.isTrueValue(name, value) ) {
						// if there are children paint children correctly and set line
						/* SET CORRECT CLASS FOR LAST ELEMENT */
						var aElements = this.getProperty('elements');
						if (aElements.length){
							// if there is a last child, there are children, and an extra line is needed
							bb.html.addClass(this.viewNode.firstChild.firstChild, 'btl-tree-line-vertical2');

							var oLastChild = aElements[aElements.length-1];

							if ( bb.instanceOf(oLastChild, btl.namespaceURI, 'treeBranch') ){
								bb.html.addClass(oLastChild.viewNode.firstChild, 'btl-tree-line-vertical-last');
								bb.html.removeClass(oLastChild.viewNode.lastChild, 'btl-tree-line-vertical');
							} else {
								bb.html.addClass(oLastChild.viewNode, 'btl-tree-line-vertical-last');
							}
						}

						// open visually
						bb.html.removeClass(this.viewNode, 'btl-treeBranch-closed');
						bb.html.addClass(this.viewNode, 'btl-treeBranch-open');
					} else {
						bb.html.removeClass(this.viewNode, 'btl-treeBranch-open');
						bb.html.addClass(this.viewNode, 'btl-treeBranch-closed');
					}
					btl.treeBranchBase.setProperIcon(this, btl.treeBranch.getIconElement(this));
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="selected">
				
				<d:mapper type="text/javascript"><![CDATA[
					if ( btl.isTrueValue(name, value) )
						bb.html.addClass( this.getProperty('labelGate'), 'selected' );
					else
						bb.html.removeClass( this.getProperty('labelGate'), 'selected' );
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="empty">
				<d:mapper type="text/javascript"><![CDATA[
					if(btl.isTrueValue(name, value)){
						bb.html.removeClass(this.viewNode.firstChild.firstChild, 'btl-tree-line-vertical2');
						bb.html.addClass(this.viewNode, 'btl-treeBranch-empty');
					} else {
						bb.html.addClass(this.viewNode.firstChild.firstChild, 'btl-tree-line-vertical2');
						bb.html.removeClass(this.viewNode, 'btl-treeBranch-empty');
					}
					btl.treeBranchBase.setProperIcon(this, btl.treeBranch.getIconElement(this));
				]]></d:mapper>
			</d:attribute>

			<!-- METHODS -->
			<d:method name="appendChild">
				<d:argument name="node"/>
				<d:body type="text/javascript"><![CDATA[
					var oParent = node.getProperty('parentNode');
					this.callSuper('appendChild', [node]);
					if(oParent && oParent != this){
						if( bb.instanceOf(oParent, btl.namespaceURI, 'treeBranch') )
							btl.treeBranch.repaint(oParent);
						else if( bb.instanceOf(oParent, btl.namespaceURI, 'tree') )
							btl.tree.repaint(oParent);
					}
					btl.treeBranch.repaint(this);
				]]></d:body>
			</d:method>


			<!-- TODO: optimize. Using a complete repaint is not always necessary. -->
			<d:method name="insertBefore">
				<d:argument name="node"/>
				<d:argument name="child"/>
				<d:body type="text/javascript"><![CDATA[
					var oParent = node.getProperty('parentNode');
					this.callSuper('insertBefore', [node, child]);
					if(oParent && oParent != this){
						if( bb.instanceOf(oParent, btl.namespaceURI, 'treeBranch') )
							btl.treeBranch.repaint(oParent);
						else if( bb.instanceOf(oParent, btl.namespaceURI, 'tree') )
							btl.tree.repaint(oParent);
					}
					btl.treeBranch.repaint(this);
				]]></d:body>
			</d:method>

			<d:method name="removeChild">
				<d:argument name="node"/>
				<d:body type="text/javascript"><![CDATA[
					this.callSuper('removeChild', [node]);
					btl.treeBranch.repaint(this);
				]]></d:body>
			</d:method>

			<d:method name="replaceChild">
				<d:argument name="node"/>
				<d:argument name="child"/>
				<d:body type="text/javascript"><![CDATA[
					var oParent = node.getProperty('parentNode');
					this.callSuper('replaceChild', [node, child]);
					if(oParent && oParent != this){
						if( bb.instanceOf(oParent, btl.namespaceURI, 'treeBranch') )
							btl.treeBranch.repaint(oParent);
						else if( bb.instanceOf(oParent, btl.namespaceURI, 'tree') )
							btl.tree.repaint(oParent);
					}
					btl.treeBranch.repaint(this);
				]]></d:body>
			</d:method>
		</d:element>

		<d:element name="treeLeaf" extends="b:treeLeafBase">
			

			<d:resource type="image/png" src="media/treeLeaf.png"/>

			<d:template type="application/xhtml+xml">
				<div class="btl-treeLeaf btl-tree-line-vertical">
					<div class="btl-tree-line-horizontal">
						<div class="btl-treeLeaf-label-container">
							<span class="btl-label btl-treeLeaf-label btl-treeLeaf-focusIndicator"/>
							<d:content/>
						</div>
					</div>
				</div>
			</d:template>

			<!-- ATTRIBUTES -->
			<d:attribute name="selected">
				
				<d:mapper type="text/javascript"><![CDATA[
					if ( btl.isTrueValue(name, value) )
						bb.html.addClass( this.getProperty('labelGate'), 'selected' );
					else
						bb.html.removeClass( this.getProperty('labelGate'), 'selected' );
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="icon">
				<d:mapper type="text/javascript"><![CDATA[
					var sIcon = this.getProperty(name);
					var oIconEl = bb.html.getFirstByNodeType(this.viewNode, 1);
					oIconEl = bb.html.getFirstByNodeType(oIconEl, 1);
					oIconEl.style.backgroundImage = sIcon ? 'url(' + sIcon + ')' : '';
				]]></d:mapper>
			</d:attribute>
		</d:element>
	</d:namespace>
</d:tdl>